<template>
    <div class="app-container" v-loading="listLoading">
        <el-form ref="form" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="干滩名称">
                        <el-input v-model="queryParms.name"></el-input>
                    </el-form-item>
                </el-col>
             
                <el-col :span="14">
                    <el-button type="primary" @click="queryPage">搜索</el-button>
                    <el-button type="success" @click="showAddDialog" v-if="role==1">新增</el-button>
                </el-col>

                <el-col :span="4">
                    <el-select v-model="app_id" placeholder="选择项目">
                        <el-option
                        v-for="item in projectList"
                        :key="item.app_id"
                        :label="item.name"
                        :value="item.app_id">
                        </el-option>
                    </el-select>
                </el-col>
               
            </el-row>

        </el-form>
       

        <el-table  :data="list" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column  label="干滩名称">
                <template slot-scope="scope">
                    {{ scope.row.name }}
                </template>
            </el-table-column>
            <el-table-column label="干滩图片" >
                <template slot-scope="scope">
                    <template v-for="item in scope.row.imgs.split(',')">
                        <div class="imgdiv">
                            <el-image  
                                style="width: 120px; height: 120px"
                                :src="item" 
                                :preview-src-list="[item]">

                            </el-image>
                     
                        </div>
                    </template>
                   
                </template>
            </el-table-column>
            <el-table-column label="干滩面貌图" >
                <template slot-scope="scope">

                    <el-image  
                        style="width: 120px; height: 120px"
                        :src="scope.row.face_img"
                        :preview-src-list="[scope.row.face_img]">

                    </el-image>
                </template>
            </el-table-column>
          
            <el-table-column label="排序">
                <template slot-scope="scope">
                    {{ scope.row.sort  }}
                </template>
            </el-table-column>
           
          
           
            <el-table-column  label="操作" width="200">
                <template slot-scope="scope">
                    <el-button type="text" @click="showDrawer(scope.row)" v-if="role==1">设备管理</el-button>
                    <el-button type="text" @click="showEditDialog(scope.row)" v-if="role==1">编辑</el-button>
                    <el-button type="text" @click="deleteItem(scope.row)" v-if="role==1">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        
        <el-pagination
            style="float: right;margin-top: 20px;"
            @current-change="changePage"
            background
            layout="prev, pager, next,jumper"
            :total="queryParms.total">
        </el-pagination>

        <el-dialog title="新增孔位" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="干滩名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" placeholder="请输入干滩名称"></el-input>
                </el-form-item>
               
                <el-form-item label="干滩图片" :label-width="formLabelWidth">
                    <div class="imgMainDiv" v-if="form.imgList.length>0">
                        <template v-for="(item,index) in form.imgList">
                            <div class="img_div" style="width: 160px; height: 160px">
                                <el-image 
                                    style="width: 160px; height: 160px"
                                    :src="item" 
                                    :preview-src-list="form.imgList">
                                </el-image>
                                <i class="el-icon-error" @click="deleteImg(index,1,'imgList')"></i>
                            </div>
                            
                        </template>
                       
                        <!-- <img :src="form.face_img"> -->
                    </div>
                    <div class="upload_div">
                        <i class="el-icon-plus"></i>
                        <input type="file" accept="image/*" @change="changeFile($event,'imgList',1)"/>
                    </div>
            
                </el-form-item>
                <el-form-item label="干滩面貌图" :label-width="formLabelWidth">
                    <div class="imgMainDiv" v-if="form.face_img">
                        <div class="img_div" style="width: 160px; height: 160px">
                            <el-image 
                                style="width: 160px; height: 160px"
                                :src="form.face_img" 
                                :preview-src-list="form.face_img">
                            </el-image>
                            <i class="el-icon-error" @click="deleteImg(0,0,'face_img')"></i>
                        </div>

                       
                    </div>
                    <div class="upload_div">
                        <i class="el-icon-plus"></i>
                        <input type="file" accept="image/*" @change="changeFile($event,'face_img')"/>
                    </div>
                </el-form-item>
                <el-form-item label="排序" :label-width="formLabelWidth">
                    <el-input v-model="form.sort" autocomplete="off" placeholder="请输入排序"></el-input>
                </el-form-item>
                <el-form-item label="干滩简介" :label-width="formLabelWidth">
                    <el-input
                        type="textarea"
                        :rows="5"
                        resize="none"
                        placeholder="请输入内容"
                        v-model="form.remark">
                    </el-input>
                    <!-- <el-input v-model="form.intro" autocomplete="off" placeholder="请输入项目简介"></el-input> -->
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureForm">确 定</el-button>
            </div>
        </el-dialog>





           
        <el-drawer
            title="设备管理"
            :visible.sync="drawer"
            size="50%"
            direction="rtl">
            <div class="positondiv">
                <el-form ref="form" label-width="80px">
                    <el-row :gutter="20">
                        <el-col :span="14">
                            <el-button type="success" style="margin-bottom: 20px;" @click="showAddPositionDialog">新增</el-button>
                        </el-col>
                    </el-row>

                </el-form>
                <el-table  :data="devicePositionList" element-loading-text="Loading" border fit highlight-current-row>
                    <el-table-column  label="设备名称">
                        <template slot-scope="scope">
                            {{ scope.row.name }}
                        </template>
                    </el-table-column>
                   
                    <el-table-column label="位置信息">
                        <template slot-scope="scope">
                            <el-button type="text" @click="showDeviceImg(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                
                
                    <el-table-column  label="操作" width="200">
                        <template slot-scope="scope">
                        
                        
                            <el-button type="text" @click="deletePosition(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-drawer>

        <el-dialog title="位置信息" :visible.sync="dialogPositionFormVisible">
            <el-form :model="posititonForm">
                <el-form-item label="选择设备" :label-width="formLabelWidth">
                
                    <el-select v-model="posititonForm.device_id" placeholder="请选择">
                        <el-option
                        v-for="item in deviceList"
                        :key="item.device_id"
                        :label="item.name"
                        :value="item.device_id">
                        </el-option>
                    </el-select>
                </el-form-item>
           

                <el-form-item label="点选位置" :label-width="formLabelWidth">
                
                    <div class="img_main" v-if="nowItem.face_img" @click="addPoint">
                        <img :src="nowItem.face_img">

                        <div class="poiont_div" v-if="posititonForm.face_img_coordinate">
                            <img src="//webapi.amap.com/theme/v1.3/markers/b/mark_bs.png">
                        </div>
                    </div>
                   
                </el-form-item>
       
            </el-form>

        
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogPositionFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="surePostionForm">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="查看位置" :visible.sync="dialogViewFormVisible">
            
            <div class="img_main" v-if="nowItem.face_img">
                <img :src="nowItem.face_img">

                <div class="poiont_div_view"  v-if="viewForm.face_img_coordinate">
                    <img src="//webapi.amap.com/theme/v1.3/markers/b/mark_bs.png">
                </div>
            </div>
            
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogPositionFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="surePostionForm">确 定</el-button>
            </div>
        </el-dialog>


        
    </div>
</template>

<script>
import homeapi from '@/api/tailings_monitoring_service_smos_api.js'
import until from '@/api/until.js'
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            list: null,
            listLoading: true,
            queryParms:{
                page:1,
                page_size:10,
                name:"",
                total:0,
               
            },
            form:{
                app_id:"",
                name:"",
                type:"",
                imgs:"",
                imgList:[],
                remark:'',
                sort:"",
                face_img:"",
                
            },
            dialogFormVisible:false,
            formLabelWidth:'100px',
            projectList:[],
            app_id:"",
            deviceTypeList:[],


            drawer:false,
            nowItem:{},

            devicePositionList:[],
            posititonForm:{
                app_id:"",
                device_id:"",
                dry_beach_id:"",
                face_img_coordinate:"",
            },

            dialogPositionFormVisible:false,
            map:null,
            maker:null,
            deviceList:[],

            dialogViewFormVisible:false,

            viewForm:{

            }

        }
    },
    watch:{
        app_id(){
            until.setCookie("app_id",this.app_id)
            this.getDryBeachList();
        }
    },
    computed: {
        ...mapGetters([
        'role',
        
        ])
    },
    created() {
        

        this.fetchData()
        this.getDeviceType();
    },
    methods: {
        deleteImg(index,isArry,type){
            if(isArry){
              
                this.form[type].splice(index,1)
              
                
            }
            else{
             
                this.form[type]=""
               
            }
        },

        changePage(page){
            this.queryParms.page=page;
            this.getDryBeachList();
        },





        showDeviceImg(item){
            this.viewForm=item;
            this.dialogViewFormVisible=true;
            let offsetX=JSON.parse(item.face_img_coordinate).imgX
            let offsetY=JSON.parse(item.face_img_coordinate).imgY
            this.$nextTick(()=>{
  
                document.querySelector(".poiont_div_view").style.left=(offsetX-9)+'px'
                document.querySelector(".poiont_div_view").style.top=(offsetY-16)+'px'
            })

        },

        //获取设备
        async getDeviceList(){
            let page=1;
            let page_size=99999
            let name=""
            let app_id=this.app_id
            let data=await homeapi.Smos_apiDevicePageGet({page,page_size,name,app_id});
            if(data.error_code==0){
                this.deviceList=data.data.list
            }
        },

        getDviceTypeName(device_type){
            let name=""
            this.deviceTypeList.map(res=>{
                if(res.keyword==device_type){
                    name=res.name;
                }
            })
            return name;
        },
        async deletePosition(item){
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
             }).then(async () => {
                let app_id=item.app_id
                let dry_beach_id=item.id
                this.listLoading=true;
                let data=await homeapi.Smos_apiDry_beach_deviceDeleteDelete({app_id,dry_beach_id});
                if(data.error_code==0){
                    this.listLoading=false;
                    this.$message.success("删除成功");
                    this.getDevicePositionList();
                }
            }).catch(() => {
                       
            });
        },
        showDrawer(item){
            this.drawer=true
            this.nowItem=item;
            this.getDevicePositionList();
        },
         //获取设备位置信息
        async getDevicePositionList(){
            let app_id=this.app_id
            let dry_beach_id=this.nowItem.id
            let data=await homeapi.Smos_apiDry_beach_deviceAllGet({app_id,dry_beach_id});
            if(data.error_code==0){
                data.data.list.map(res=>{
                    res.name=this.getDeviceName(res.device_id)
                })

                this.devicePositionList=data.data.list;
                console.log(this.devicePositionList)
      
            }
        },
        getDeviceName(id){
            let deviceName=""
            this.deviceList.map(res=>{
                if(res.device_id==id){
                    console.log(res)
                    deviceName=res.name
                }
            })
            
            return deviceName
        },
        showAddPositionDialog(){
       
       
            this.posititonForm={
                app_id:this.app_id,
                device_id:"",
                dry_beach_id:this.nowItem.id,
           
                face_img_coordinate:"",
            }
            this.dialogPositionFormVisible=true;
            // this.$nextTick(()=>{
            //     this.createMap();
            // })
        },
        async surePostionForm(){
            let form=this.posititonForm;
    
            this.listLoading=true;
            let data=await homeapi.Smos_apiDry_beach_deviceCreatePost(form)
            if(data.error_code==0){
                this.listLoading=false;
                this.$message.success("新增成功");
                this.dialogPositionFormVisible=false;
                this.getDevicePositionList();
            }
           
        },
        addPoint(e){
            let face_img_coordinate={
                imgX:e.offsetX,
                imgY:e.offsetY
            }
            this.posititonForm.face_img_coordinate=JSON.stringify(face_img_coordinate)
            this.$nextTick(()=>{
                console.log(document.querySelector(".poiont_div"))
                document.querySelector(".poiont_div").style.left=(e.offsetX-9)+'px'
                document.querySelector(".poiont_div").style.top=(e.offsetY-16)+'px'
            })
         
        },





        async getDeviceType(){
            let data=await homeapi.Smos_apiDeviceTypesGet();
            if(data.error_code==0){
                this.deviceTypeList=data.data;
            }
        },
        getDviceTypeName(device_type){
            let name=""
            this.deviceTypeList.map(res=>{
                if(res.keyword==device_type){
                    name=res.name;
                }
            })
            return name;
        },
        async fetchData() {
            let form=this.queryParms
            let data=await homeapi.Smos_apiAppPageGet(form);
            if(data.error_code==0){
                this.listLoading=false;
                this.projectList=data.data.list;
                this.$nextTick(()=>{
                    let app_id=until.getCookie("app_id");
                    if(app_id){
                        this.app_id=parseInt(app_id) 
                    }
                    else{
                        this.app_id=data.data.list[0].app_id;
                    }
                    this.getDeviceList();
                })
               
                
               
            }
        },
        queryPage(){
            this.queryParms.page=1;
            this.getDryBeachList();
        },
        showAddDialog(){
            this.dialogFormVisible=true;
            this.form={
                app_id:"",
                name:"",
                type:"",
                imgs:"",
                imgList:[],
                remark:'',
                sort:"",
                face_img:"",
            }
        },
        async sureForm(){
            if(this.form.id){
                this.editForm();
            }
            else{
                this.addForm();
            }
        },
        async getDryBeachList(){
            let form=this.queryParms;
            form.app_id=this.app_id;
            let data=await homeapi.Smos_apiDry_beachPageGet(form);
            if(data.error_code==0){
                this.list=data.data.list?data.data.list:[];
                this.queryParms.total=data.data.total
            }
        },
        async addForm(){
            let form=this.form;
            form.app_id=this.app_id;
            form.imgs=form.imgList.length>0?form.imgList.join(","):""
            this.listLoading=true;
            let data=await homeapi.Smos_apiDry_beachCreatePost(form);
            console.log(data)
            if(data.error_code==0){
                this.listLoading=false
                this.$message.success("新增成功")
                this.dialogFormVisible=false;
                this.getDryBeachList();

            }
        },
        async editForm(){
            let form=this.form;
            form.app_id=this.app_id;
            form.imgs=form.imgList.length>0?form.imgList.join(","):""
            form.dry_beach_id=form.id
            this.listLoading=true;
            let data=await homeapi.Smos_apiDry_beachUpgradePut(form);
            if(data.error_code==0){
                this.listLoading=false
                this.$message.success("编辑成功")
                this.dialogFormVisible=false;
                this.getDryBeachList();

            }
        },
        showEditDialog(item){
            this.dialogFormVisible=true;
            this.form=JSON.parse(JSON.stringify(item));
        },
        async deleteItem(item){
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
             }).then(async () => {
                let app_id=item.app_id
                let dry_beach_id=item.id
                this.listLoading=true;
                let data=await homeapi.Smos_apiDry_beachDeleteDelete({app_id,dry_beach_id});
                if(data.error_code==0){
                    this.listLoading=false;
                    this.$message.success("删除成功");
                    this.getDryBeachList();
                }
            }).catch(() => {
                       
             });
        },
        async changeFile(e,type,isArry){
            
            let file=e.target.files[0];
            var formData = new FormData();
            // 服务端要求参数是 pic1 
            formData.append('image',file);
            console.log(formData)
            this.listLoading=true;
            let data=await homeapi.Smos_apiUpload_imgPost({},formData);
            if(data.error_code==0){
                this.listLoading=false
                if(isArry){
                    this.form[type].push(data.data)
                }
                else{
                    this.form[type]=data.data
                }
            }
        }
    }
}
</script>
<style lang="css" scoped>
    .upload_div{
        width: 160px;
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ddd;
        border-radius: 8px;
        position: relative;
        float: left;
        margin-left: 10px;
        

    }
    .upload_div input{
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
    }
    .imgdiv{
        width: 120px;
        
    }
    .imgdiv img{
        width: 100%;
       
    }
    .upload_div i{
        font-size: 32px;
    }
    .imgMainDiv{
       display: flex;
       align-items: center;
       justify-content: flex-start;
       float: left;
    }
    .imgMainDiv img{
        width: 100%;
        height: 100%;
    }
    .img_div{
        position: relative;
    }
    .img_div i{
        position: absolute;
        top: 5px;
        right: 5px;
        color: #F56C6C;
    }




    
    .img_main{
        width: 800px;
        cursor: pointer;
        position: relative;
    }
    .img_main img{
        width: 100%;
    }

    .poiont_div{
        position: absolute;
        top: 0;
        left: 0;
    }
    .poiont_div img{
        width: 19px;
        height: 32px;
    }

    .poiont_div_view{
        position: absolute;
        top: 0;
        left: 0;
    }
    .poiont_div_view img{
        width: 19px;
        height: 32px;
    }
</style>